<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局</title>
    <link rel="icon" href="img/favicon.ico" type="x-icon">
    <link rel="stylesheet" href="CSS/TEST1.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .backimg {
            position: fixed;
            transform: translate(-50%, -50%);
            z-index: -1;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(50%);
        }

        .top {
            display: flex;
            height: 55px;
            background-color: white;
            /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
            align-items: center;
            position: relative;
            z-index: 9999;
        }

        .topa {
            display: block;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            color: rgb(44, 62, 80);
            line-height: 55px;
            width: 100px;
            text-align: center;
            cursor: pointer;
        }

        .topa:hover {
            background-color: rgb(226, 239, 229);
            color: rgb(37, 180, 73);
        }

        .topa:hover::after {
            content: '';
            position: absolute;
            transform: translate(-50%, -100%);
            left: 50%;
            top: 55px;
            height: 5px;
            width: 60px;
            border-radius: 5px;
            background-color: rgb(37, 180, 73);
        }

        .topdrop {
            position: absolute;
            transform: translateX(-50%) scale(0.5);
            transform-origin: top center;
            top: 60px;
            left: 50%;
            background-color: rgba(255, 255, 255, 1);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            padding: 0;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            display: none;
        }

        .topdrop.dropfadein {
            display: flex;
            animation: dropfadein 0.15s forwards;
        }

        .topdrop.dropfadeout {
            animation: dropfadeout 0.15s forwards;
        }

        .topdrop.hidden {
            display: none;
        }

        @keyframes dropfadein {
            0% {opacity: 0; transform: translateX(-50%) scale(0.5);}
            100% {opacity: 1; transform: translateX(-50%) scale(1);}
        }

        @keyframes dropfadeout {
            0% { opacity: 1; transform: translateX(-50%) scale(1);}
            100% { opacity: 0; transform: translateX(-50%) scale(0.5);}
        }

        .droplista {
            white-space: nowrap;
            height: 45px;
            line-height: 45px;
            cursor: pointer;
            padding: 0 10px 0 10px;
        }

        .droplista:hover {
            color: #219e40;
            background-color: rgba(37, 180, 73, 0.3);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .msg {
            display: flex;
            border-radius: 10px;
            position: relative;
            transform: translate(-50%, 0);
            /* background-color: rgba(255, 255, 255, 0.8); */
            top: 75px;
            left: 50%;
            /* height: 1500px; */
            width: 1200px;
        }

        .msgl {
            display: flex;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            position: absolute;
            transform: translate(0, 0);
            top: 0;
            left: 0;
            width: 820.271px;
            border: 0.667px;
            margin-right: 22.4px;
            flex-wrap: wrap;
            padding: 14px 28px 28px 28px;
            opacity: 1;
            transition: opacity 1s ease-in-out;
        }

        .msgl > *:not(.dob) {
            width: 100%;
            word-wrap: break-word;
        }

        .msgr {
            display: flex;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            position: absolute;
            transform: translate(0, 0);
            top: 0;
            right: 0;
            width: 278px;
            padding: 14px;
            flex-wrap: wrap;
        }

        .msgr * {
            width: 100%;
            word-wrap: break-word;
        }
        
        .headtext {
            tab-size: 4;
            box-sizing: inherit;
            background: none;
            border: 0;
            font: inherit;
            vertical-align: baseline;
            margin: 0;
            overflow: visible;
            padding: 0;
            font-size: 3.25rem;
            color: rgb(44, 62, 80);
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
        }

        .self{
            border: 1px solid black;
        }

        .spanhidd {
            display: inline-block;
            visibility: hidden;
        }

        h2 {
            position: relative;
            padding-left: 20px;
        }

        h2::before {
            content: "";
            position: absolute;
            top: 7%;
            left: 0;
            width: 6px;
            height: 100%;
            background-color: #25B449;
            border-radius: 5px;
        }

        h3 {
            position: relative;
            padding-left: 20px;
        }

        h3::before {
            content: "";
            position: absolute;
            top: 7%;
            left: 0;
            width: 6px;
            height: 100%;
            background-color: #25B449;
            border-radius: 5px;
        }


        a {
            color: inherit
        }

        .dob {
            all: initial;
            font-size: initial;
            width: 100%;           
        }

        .popup {
            position: fixed;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            max-width: 80vw;
            max-height: 80vh;
            background-color: rgba(0, 0, 0, 0);
            display: none;
            overflow: hidden;
            padding: 0;
            z-index: 100;
        }

        .popup img {
            max-width: 80vw;
            max-height: 80vh;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }

        .full {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 99;
            display: none;
            overflow: hidden;
        }

        .fullfade {
            display: block;
            position:fixed ;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 1;
            background-color: white;
            z-index: 200;
            animation: fullfade 1s ease forwards;
        }

        @keyframes fullfade {
            0% {opacity: 1;}
            100% {opacity: 0;}
        }

        .msghid {
            display: none;
            opacity: 0;
        }

        .index {
            padding-left: 0;
        }

        .indexitem {
            height:45px;
            line-height: 45px;
            cursor: pointer;
            padding-left: 14px;
        }

        .indexactive {
            position: relative;
            color: #219e40;
            background-color: rgba(37, 180, 73, 0.3);
        }

        .indexactive::before {
            content: "";
            position: absolute;
            top: 0%;
            left: -4px;
            width: 4px;
            height: 100%;
            background-color: #25B449;
            border-radius: 5px;
        }

        .inputfocus {
            width: 300px;
            height: 35px;
            background-color: transparent;
            border-radius: 8px;
            padding-left: 15px;
            border: 2px solid #6D9EF0;
        }

        .inputfocus:focus {
            outline: none;
            border: 2px solid #25B449;
            background-image: linear-gradient(45deg, rgb(35, 240, 240), rgb(255, 32, 207));
            color: white;
        }

        .bili:hover {
            color: #00AEEC;
        }

        .h4color {
            color: #18191C;
            transition: color 0.2s linear;
        }

        .h4bcolor {
            color: #9499A0;
            transition: color 0.2s linear;
        }

        @keyframes msghidfadein{
            0% {opacity: 0;}
            100% {opacity: 1;}
        }

        @keyframes msghidfadeout{
            0% {opacity: 1;}
            100% {opacity: 0;}
        }


        .msghid {
            display: none;
        }

        .msghidfadein {
            animation: msghidfadein 0.5s ease forwards;
        }

        .msghidfadeout {
            animation: msghidfadeout 0.5s ease forwards;
        }

        .circle {
            width: 55px;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border: 2px solid red;
            margin: 10px;
            display: inline-block;
            color: #fff;
            border-radius: 55px;
            font-size: 20px;
        }

        .circle:nth-child(2n) {
            background-color: black;
        }

        .circle:nth-child(2n+1) {
            background-color: blue;
        }

        .ele {
            width: 55px;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border: 2px solid red;
            margin: 10px;
            display: inline-block;
            color: #fff;
            border-radius: 55px;
            font-size: 20px;
        }

        .front {
            background-color: rgb(255, 32, 207);
        }

        .back {
            background-color: rgb(35, 240, 240);
        }

        .tlbr {
            position: relative;
        }

        .tlbr::after {
            content: url(img/TL.png);
            position: absolute;
            top: 0;
            left: 0;
        }

        .tlbr::before {
            content: url(img/BR.png);
            position: absolute;
            bottom: -4px;
            right: 0;
        }

        .shopcar {
            position: relative;
        }

        .shopcar::before {
            content: '5';
            position: absolute;
            transform: translate(-50%, -50%);
            right: -7px;
            top: 5px;
            width: 24px;
            height: 19px;
            border-radius: 8px;
            background-color: #e1251b;
            color: #fff;
            text-align: center;
            line-height: 19px;
        }

        .Arotate {
            transition: transform 0.5s ease;
        }

        .Arotate:hover {
            transform: rotate(30deg);
        }

        .Ascale {
            transition: transform 0.5s ease;
        }

        .Ascale:hover {
            transform: scale(0.7);
        }

        .Askew {
            transition: transform 0.5s ease;
        }

        .Askew:hover {
            transform: skew(30deg);
        }

        .Atranslate {
            transition: transform 0.5s ease;
        }

        .Atranslate:hover {
            transform: translate(50px, -50px);
        }

        .aniball {
            animation: aniball 6s infinite ease-in-out;
            border-radius: 50%;
            position: absolute;
        }

        @keyframes aniball {
            0% {width: 25px; height: 25px; background-color: transparent; top: 0px; left: 0px;}
            25% {width: 65px; height: 65px; background-color: rgb(35, 240, 240); top: 155px; left: 155px;}
            50% {width: 45px; height: 45px; background-color: rgb(255, 32, 207); top: 200px; left: 400px;}
            75% {width: 38px; height: 38px; background-color: rgb(35, 240, 240); top: 76px; left: 355px;}
            100% {width: 10px; height: 10px; background-color: transparent; top: 275px; left: 475px;}
        }

        .cubecon {
            perspective: 1000px;
            width: 200px;
            height: 200px;
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotateCube 5s infinite linear;
        }

        .face {
            position: absolute;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid #ccc;
        }

        .Bfront { transform: translateZ(100px); }
        .Bback { transform: rotateY(180deg) translateZ(100px); }
        .Bleft { transform: rotateY(-90deg) translateZ(100px); }
        .Bright { transform: rotateY(90deg) translateZ(100px); }
        .Btop { transform: rotateX(90deg) translateZ(100px); }
        .Bbottom { transform: rotateX(-90deg) translateZ(100px); }

        @keyframes rotateCube {
            0% { transform: rotateX(0) rotateY(0); }
            100% { transform: rotateX(360deg) rotateY(360deg); }
        }

    </style>
</head>
<body>
    <div><img class="backimg" src="img/background.jpg" alt="Error"></div>

    <div class="fullfade" id="fullfadehidden"></div>

    <div class="popup" id="popup">
        <img src="" alt="Error" id="popupimg">
    </div>

    <div class="full"></div>


    <div style="position: fixed; width: 100%; z-index: 100; box-shadow:0 0 2px rgba(0, 0, 0, 0.2);">
        <div class="top">
            <div class="top">
                <img style="margin-left: 15px; margin-right: 5px; height: 55px;" src="img/logo.png" alt="Error">
            </div>
            <div class="top topdropmark">
                <a class="topa" href="https://gitee.com/lijiawo/group">仓库</a>
            </div>
            <div class="top topdropmark">
                <span class="topa" onclick="showContent('msg1')">Flex布局</span>
            </div>
            <div class="top topdropmark">
                <span class="topa" onclick="showContent('msg2')">Grid布局</span>
            </div>
            <div class="top topdropmark">
                <span class="topa" onclick="showContent('msg3')">多列布局</span>
            </div>
        </div>
    </div>

    <div class="msg">
        <div class="msgl" id="msg1">
            <div class="headbox" style="margin-bottom: 25px;">
                <h1 class="headtext">Flex布局</h1>
                <hr style="margin-top: 30px; margin-bottom: 45px;">
            </div>
            <div>
                <div class="flex1">
                    <div class="box">a</div>
                    <div class="box">justify-content: center</div>
                    <div class="box">c</div>
                </div>
                <div class="flex2">
                    <div class="box">justify-content:flex-start</div>
                    <div class="box">b</div>
                    <div class="box">c</div>
                </div>
                <div class="flex3">
                    <div class="box">a</div>
                    <div class="box">b</div>
                    <div class="box">justify-content:flex-end</div>
                </div>
                <div class="flex4">
                    <div class="box">a</div>
                    <div class="box">justify-content:space-between</div>
                    <div class="box">c</div>
                </div>
                <div class="flex5">
                    <div class="box">a</div>
                    <div class="box">justify-content:space-around</div>
                    <div class="box">c</div>
                </div>
                <div class="flex6">
                    <div class="box">a</div>
                    <div class="box">justify-content:space-evenly</div>
                    <div class="box">c</div>
                </div>
                <div class="flex7">
                    <div class="box">align-items: flex-start</div>
                    <div class="box">b</div>
                    <div class="box">c</div>
                </div>
                <div class="flex8">
                    <div class="box">a</div>
                    <div class="box">align-items: center</div>
                    <div class="box">c</div>
                </div>
                <div class="flex9">
                    <div class="box">a</div>
                    <div class="box">b</div>
                    <div class="box">align-items: flex-end</div>
                </div>
                <div class="flex10">
                    <div class="box">align-items: center</div>
                    <div class="box">b</div>
                    <div class="box">justify-content: center</div>
                </div>
                <div class="flex11">
                    <div class="box">flex-direction: row</div>
                    <div class="box">b</div>
                    <div class="box">c</div>
                </div>
                <div class="flex12">
                    <div class="box">flex-direction: row-reverse</div>
                    <div class="box">b</div>
                    <div class="box">c</div>
                </div>
                <div class="flex13">
                    <div class="box">flex-direction: column</div>
                    <div class="box">b</div>
                    <div class="box">c</div>
                </div>
                <div class="flex14">
                    <div class="box">a</div>
                    <div class="box">b</div>
                    <div class="box">flex-direction: column-reverse</div>
                </div>
                <center>
                <div class="flex15">
                    <div class="box">a</div>
                    <div class="box">flex-wrap: nowrap</div>
                    <div class="box">c</div>
                </div>
                <div class="flex16">
                    <div class="box">a</div>
                    <div class="box">b</div>
                    <div class="box">flex-wrap: wrap</div>
                </div>
                <div class="flex17">
                    <div class="box">a</div>
                    <div class="box">b</div>
                    <div class="box">flex-wrap: nowrap-reverse</div>
                </div>
                <div class="flex18">
                    <div class="box">a-order:1</div>
                    <div class="box">b-order:0</div>
                    <div class="box">c-order:2</div>
                </div>
                <div class="flex19">
                    <div class="box">a</div>
                    <div class="box">nth-child(2):align-self: center</div>
                    <div class="box">c</div>
                </div>
                <div class="flex20">
                    <div class="box">a</div>
                    <div class="box">nth-child(2):align-self: flex-end</div>
                    <div class="box">c</div>
                </div>
                </center>
            </div>
        </div>


        
        <div class="msgl msghid" id="msg2">
            <div class="headbox" style="margin-bottom: 25px;">
                <h1 class="headtext">Grid布局</h1>
                <hr style="margin-top: 30px; margin-bottom: 45px;">
            </div>
            <div>
                    <!-- grid-template-columns -->
                <div class="grid grid1">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid2">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid3">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <!-- grid-template-areas -->
                <div class="grid layout">
                    <header class="header1">头部</header>
                    <aside class="aside1">侧边栏</aside>
                    <main class="main1">内容</main>
                    <footer class="footer1">底部</footer>
                </div>
                <!-- 对齐 -->
                <div class="grid grid4" style="display: grid; align-items: start; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid5" style="display: grid; align-items: center; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid6" style="display: grid; align-items: end; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid7" style="display: grid; align-items: end; justify-items: start; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid8" style="display: grid; align-items: end; justify-items: center; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid9" style="display: grid; align-items: end; justify-items: end; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid10" style="display: grid; align-items: end; justify-content: space-between; grid-template-columns:repeat(3,150px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid11" style="display: grid; align-items: end; justify-content: space-around; grid-template-columns:repeat(3,150px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid12" style="display: grid; align-items: end; justify-content: space-evenly; grid-template-columns:repeat(3,150px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid13" style="display: grid; align-content: center; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid14" style="display: grid; align-content: end; grid-template-columns:repeat(3,200px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid15" style="display: grid; align-content: end; justify-content: center; grid-template-columns:repeat(3,150px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
                <div class="grid grid16" style="display: grid; align-content: end; justify-content: space-between; grid-template-columns:repeat(3,150px);">
                    <div class="column 1">column1</div>
                    <div class="column 2">column2</div>
                    <div class="column 3">column3</div>
                    <div class="column 4">column4</div>
                    <div class="column 5">column5</div>
                    <div class="column 6">column6</div>
                </div>
            </div>
        </div>



        <div class="msgl msghid" id="msg3">
            <div class="headbox" style="margin-bottom: 25px;">
                <h1 class="headtext">多列布局</h1>
                <hr style="margin-top: 30px; margin-bottom: 45px;">
            </div>
            <div>
                <center>
                <div class="mao tttest">毛泽东，字润之，笔名子任。1893年12月26日生于湖南湘潭韶山冲一个农民家庭。1976年9月9日在北京逝世。中国人民的领袖，马克思主义者，伟大的无产阶级革命家、战略家和理论家，中国共产党、中国人民解放军和中华人民共和国的主要缔造者和领导人，诗人，书法家。</div>
                </center>
            </div>
        </div>



        <div class="msgr">
            <div style="width: 100%; margin: 10px 0 20px 0;">
                <h3>目录</h3>
                <hr style="margin: 15px 0 0 0;">
            </div>
            <div style="display: flex;">
                <div style="border-radius: 10px; width: 4px; background-color: gray;">
                </div>
                <div>
                    <ol class="index">
                        <li class="ind indexitem indexactive" onclick="showContent('msg1')">
                            Flex布局
                        </li>
                        <li class="ind indexitem" onclick="showContent('msg2')">
                            Grid布局
                        </li>
                        <li class="ind indexitem" onclick="showContent('msg3')">
                            多列布局
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>



    <script>
        const imagestest = document.getElementById('img01');
        const images = imagestest ? [imagestest] : [];
        const popup = document.getElementById('popup');
        const popupimg = document.getElementById('popupimg');
        const full = document.querySelector('.full');
        
        images.forEach(img => {
            img.addEventListener('click', () => {
                const imgurl = img.getAttribute('data-src');
                popupimg.src = imgurl;
                popup.style.display = 'block';
                full.style.display = 'block';
            });
        });

        popup.addEventListener('click', () => {
            popup.style.display = 'none';
            full.style.display = 'none';
        });

        full.addEventListener('click', () => {
            popup.style.display = 'none';
            full.style.display = 'none';
        });

        const hiddenfull = document.getElementById('fullfadehidden')

        hiddenfull.addEventListener('animationend', () => {
            hiddenfull.style.display = 'none';
        });

        hiddenfull.addEventListener('click', () => {
            hiddenfull.style.display = 'none';
        });

        function showContent(divid) {
            var alldiv = document.querySelectorAll('.msgl');
            alldiv.forEach(function(div) {
                if (div.id === divid) {
                    div.classList.remove('msghid');
                } else {
                    div.classList.add('msghid');
                }
            });

            var indexactive = document.querySelectorAll('.ind');

            indexactive.forEach(function(ind) {
                ind.classList.toggle('indexactive', ind.getAttribute('onclick').includes(divid));
            });

        };




    </script>


</body>
</html>